/*
 * @Descripttion: 
 * @Author: zhangchong zc16607@gmail.com
 * @Date: 2023-03-13 10:50:39
 * @LastEditors: zhangchong zc16607@gmail.com
 * @LastEditTime: 2023-04-14 14:08:26
 */

import React, { createContext, useEffect, useState } from 'react';
import { useColorScheme } from 'react-native'
import appColor from '../utils/appColor';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { NavigationContainer } from '@react-navigation/native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Storage from '../utils/asyncStorage';
import { TokenContext } from './Context'
import Home from './home/home'
import Me from './me/me'
import Detail from './home/detail'
import AddSite from './home/addsite'
import Login from './me/login'
import NtConfig from './me/ntconfig'

const appStack = createNativeStackNavigator()
const Tab = createBottomTabNavigator()




const TabStackScreen = () => {
  const colorScheme = useColorScheme()
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;

          if (route.name === 'home1') {
            iconName = focused ? 'reorder-four' : 'reorder-four-outline';
          } else if (route.name === 'me') {
            iconName = focused ? 'person' : 'person-outline';
          }

          // You can return any component that you like here!
          return <Ionicons name={iconName} size={size} color={color} />;
        },
        tabBarStyle: {
          backgroundColor: colorScheme === 'dark' ? appColor.darkTabbg : appColor.lightTabbg,
        },
        tabBarActiveTintColor: '#f56c6c',
        tabBarInactiveTintColor: 'gray',
      })}
    >
      <Tab.Screen name='home1' component={Home} options={{ headerShown: false, title: '首页' }}></Tab.Screen>
      <Tab.Screen name='me' component={Me} options={{ headerShown: false, title: '我的' }}></Tab.Screen>
    </Tab.Navigator>
  )
}

const Nav = () => {
  const getToken = async () => {
    const userdata = await Storage.getItem('user')
    return userdata ? userdata.token : ''
  }

  const [token, setToken] = useState('init')
  useEffect(() => {
    getToken().then(res => setToken(res))
  }, [])

  // 给子组件传递一个方法更新本组件的token,登录后及时更新组件
  const updateToken = (val) => setToken(val)

  const colorScheme = useColorScheme()

  if(token === 'init') return (<></>)

  return (
    <TokenContext.Provider value={{ updateToken }}>
      <NavigationContainer>
        <appStack.Navigator
          screenOptions={{
            headerStyle: {
              backgroundColor: colorScheme === 'dark' ? appColor.darkTabbg : appColor.lightTabbg,
            },
            headerTintColor: colorScheme === 'dark' ? appColor.light3 : appColor.dark3,
            headerTitleStyle: {
              // fontWeight: 'bold',
            }
          }}
        >
          {
            token ? (
              <>
                <appStack.Screen name='home' component={TabStackScreen} options={{ headerShown: false }}></appStack.Screen>
                <appStack.Screen name='detail' component={Detail} options={{ title: '详情' }}></appStack.Screen>
                <appStack.Screen name='addsite' component={AddSite} options={{ title: '添加站点' }}></appStack.Screen>
                <appStack.Screen name='ntconfig' component={NtConfig} options={{ title: 'nastool配置' }}></appStack.Screen>
                {/* <appStack.Screen name='login' component={Login} options={{ headerShown: false }}></appStack.Screen> */}
              </>
            ) : (
              <appStack.Screen name='login' component={Login} options={{ headerShown: false }}></appStack.Screen>
            )
          }

        </appStack.Navigator>
      </NavigationContainer>
    </TokenContext.Provider>

  )
}

export default Nav